<!--消息页面-->
<template>
    <div class="body-bac-container">
        <div class="my-info-container container">
            <!--左边-->
            <el-row>
                <!--右边-->
                <el-col :span="6" class="col-left ">
                    <!--导航--->
                    <div class="left-container bac-container ">
                        <el-menu default-active="user-details" :router="true">
                            <el-menu-item index="user-details">
                                <i class="el-icon-third-bussiness-man"></i>
                                <span slot="title">基础信息</span>

                            </el-menu-item>

                            <el-menu-item index="upload-head">
                                <i class="el-icon-third-usercenter"></i>
                                <span slot="title">修改头像</span>

                            </el-menu-item>

                            <el-menu-item index="business-card">
                                <i class="el-icon-third-namecard"></i>
                                <span slot="title">我的名片</span>

                            </el-menu-item>
                            <el-menu-item index="user-tag">
                                <i class="el-icon-third-attachent"></i>
                                <span slot="title">我的标签</span>
                            </el-menu-item>
                            <el-menu-item index="account">
                                <i class="el-icon-third-account"></i>
                                <span slot="title">账号信息
                                </span>
                            </el-menu-item>
                            <el-menu-item index="update-password">
                                <i class="el-icon-third-password"></i>
                                <span slot="title">修改密码</span>
                            </el-menu-item>
                            <!--<el-menu-item index="update-email">-->
                                <!--<i class="el-icon-third-email"></i>-->
                                <!--<span slot="title">绑定邮箱</span>-->
                            <!--</el-menu-item>-->
                            <!--<el-menu-item index="system-message-list">-->
                                <!--<i class="el-icon-third-VIP"></i>-->
                                <!--<span slot="title">会员信息</span>-->
                            <!--</el-menu-item>-->
                        </el-menu>
                    </div>
                </el-col>
                <el-col :span="18" class="col-right">
                    <div class="bac-container col-top" v-if="userInfo != null">
                        <el-progress type="circle" :width="40" :percentage="userInfo.degree"></el-progress>
                        <div class="info-describe">
                            <div>
                                当前信息完整度为：{{userInfo.degree}}%
                            </div>
                            <div>
                                完善信息有利于商友，潜在的客户找到您
                            </div>
                        </div>
                    </div>
                    <router-view v-on:changeDegree="getUserInfo"></router-view>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import  common from '@/api/common'

    export default {
        data: function () {
            return {
                userInfo: null
            }
        },
        methods: {
            getUserInfo() {
                common.getUserInfo().then((res)=>{
                    this.userInfo = res;
                })
            }
        },
        mounted() {
            this.getUserInfo();
        }
    }
</script>

<style>
    .my-info-container {
        position: relative;
    }

    .my-info-container .left-container .el-menu {
        border: none;
    }

    .my-info-container .left-container .el-menu .el-menu-item {
        font-size: 15px;
    }

    .my-info-container .left-container .el-menu .el-menu-item .el-badge {
        margin-left: 5px;
        margin-top: -10px;
    }

    .my-info-container .left-container .el-menu-item [class^=el-icon-] {
        font-size: 26px;

    }

    .my-info-container .col-top {
        display: flex;
        padding-left: 20px;
    }

    .my-info-container .info-describe {
        color: #909399;
        line-height: 16px;
        margin-top: 3px;
        font-size: 12px;
        margin-left: 20px;
    }

    .my-info-container .el-cascader {
        display: unset;
    }

    .my-info-container .el-form {
        margin: 20px;
    }


</style>
